<data name="动态" th:id="${id}" />
<data name="用户信息" />
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="_csrf" th:content="${_csrf.token}" />
    <meta name="_csrf_header" th:content="${_csrf.headerName}" />
    <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}" />
    <link th:href="@{/static/css/blog.css}" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
	  <script th:src="@{/static/js/html5shiv.min.js}"></script>
	  <script th:src="@{/static/js/respond.min.js}"></script>
	<![endif]-->
    <title>动态</title>
</head>

<body>
    <fragment name="顶部导航" />
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="media" th:data-news="${news.id}">
                    <div class="media-left">
                        <a href="#">
                          <img class="media-object" th:src="${gravatars.getOptionalUrl(myInfo.gravatar).orElse('/static/img/guest.png')}" style="width:32px;height:32px;">
                        </a>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">
                            <span th:text="${times.format(news.write,'yyyy-MM-dd HH:mm')}"></span>
                            <a href="javascript:void(0)" th:data-comment="${news.id}" style="margin-left:5px" th:if="${news.allowComment || user != null}"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></a>
                        </h5>
                        <p th:utext="${news.content}">

                        </p>
                        <div id="comment-detail">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <input type="hidden" id="gravatarPrefix" th:value="${gravatars.getUrl('')}" />
    <input type="hidden" id="login" th:value="${user != null}" />
	<inpu type="hidden" id="newsId" th:value="${news.id}"/>

    <fragment name="底部" />
    <div th:replace="base/foot_source">&nbsp;</div>
   <script th:inline="javascript">
        var config = {
            isLogin: [[${user != null}]],
            gravatarPrefix: [[${gravatars.getUrl('')}]]
        };
     var c = $("#comment-detail");
     var _config = {
     	 pageSize:20,
         page:1,
         moduleId:[[${news.id}]],
         moduleType:'news',
         asc:true,
         container:c,
         allowComment:[[${news.allowComment}]],
         afterLoad:function(page){
           if(page.totalRow>0){
              c.show();
              c.prepend('<hr>');
           }else{
           	  c.hide();
           }
         }
     }
     $(function(){
     	$('[data-comment]').click(function(){
          var moduleId = $(this).data('comment');
        	cmt.doComment(moduleId,'news',function(){
             cmt.renderComment(_config);
            });
        });
     });
    </script>
    <script th:src="@{/static/plugin/comment/js/new_comment.js}">
    </script>
  <script>
    	cmt.renderComment(_config);
  </script>
</body>